<template>
  <div class="home-page">
    <!-- 顶部搜索及扫码区域 -->
    <div class="top-bar">
      <div class="logo">
        <!-- 这里替换成实际logo图片 -->
      </div>
      <div class="search-wrap">
        <input type="text" class="search-input" placeholder="搜索" v-model="searchVal" />
        <div class="scan-btn" @click="handleScan">扫码购</div>
      </div>
    </div>

    <!-- 30分钟达及分类导航 -->
    <div class="delivery-nav">
      <div class="delivery-info">
        <span class="fast-text">最快</span>
        <span class="time-text">30分钟达</span>
      </div>
      <div class="category-list">
        <div>
          <img src="../assets/1.png" alt="category" class="category-icon" />
          <span class="category-text">生活好物</span>
        </div>
        <div>
          <img src="../assets/2.png" alt="category" class="category-icon" />
          <span class="category-text">全球购</span>
        </div>
        <div>
          <img src="../assets/3.png" alt="category" class="category-icon" />
          <span class="category-text">新特药</span>
        </div>
        <div>
          <img src="../assets/4.png" alt="category" class="category-icon" />
          <span class="category-text">原研药</span>
        </div>
        <div>
          <img src="../assets/5.png" alt="category" class="category-icon" />
          <span class="category-text">感冒发烧</span>
        </div>
      </div>
    </div>

    <!-- 新人专享礼包 -->
    <div class="new-user-bonus">
      <h3 class="bonus-title">新人专享礼包</h3>
      <div class="bonus-cards">
        <div class="bonus-card" v-for="(card, cardIndex) in bonusCards" :key="cardIndex">
          <p class="card-price">¥{{ card.price }}</p>
          <p class="card-condition">{{ card.condition }}</p>
          <button class="get-btn" @click="handleGetBonus(card)">去领取</button>
        </div>
      </div>
    </div>

    <!-- 新品推荐 -->
    <div class="new-product">
      <div class="product-title">
        <span>新品推荐</span>
        <span class="new-tag">NEW</span>
      </div>
      <div class="product-list">
        <div>
          <img src="../assets/a1.png" alt="product" class="product-img" />
          <p class="product-price">¥88.1</p>
        </div>
        <div>
          <img src="../assets/a2.png" alt="product" class="product-img" />
          <p class="product-price">¥88.2</p>
        </div>
      </div>
    </div>

    <!-- 拼团钜惠 -->
    <div class="group-buy">
      <h3 class="group-title">拼团钜惠</h3>
      <div class="group-list">
        <div>
          <img src="../assets/a3.png" alt="group" class="group-img" />
          <p class="group-price">¥88.9</p>
        </div>
        <div>
          <img src="../assets/a4.png" alt="group" class="group-img" />
          <p class="group-price">¥99.9</p>
        </div>
      </div>
    </div>

    <!-- 炎陵黄桃广告 -->
    <div class="ad-box">
      <img src="@/assets/1.png" alt="peach" class="ad-img" />
      <div class="ad-text">
        <p class="ad-title">炎陵黄桃 抢“鲜”预售</p>
        <p class="ad-desc">下单抽好礼 免费带回家</p>
      </div>
    </div>
    <!-- tab切换 -->
    <div class="tab-container">
      <div v-for="(tab, index) in tabList" :key="index" class="tab-item" :class="{ active: currentTab === index }"
        @click="handleTabClick(index)">
        {{ tab }}
      </div>
      <div class="more-icon" @click="handleMoreClick">
        ☰
      </div>

    </div>
    <!-- 商品列表 -->
    <div class="product-list">
      <div v-for="(item, index) in tabshoplist" :key="index" class="product-item" @click="addGouwu(item)">
        <img :src="item.img" class="product-img" style="width: 100px; height: 100px" />
        <p class="product-name">{{ item.name }}</p>
        <p class="product-price">¥{{ item.price }}</p>
      </div>
    </div>
    <!-- 底部结算框 -->
    <div class="bottom-bar" @click="dan()">
      <div class="cart-btn">
        <img src="../assets/gou.png" alt="cart" class="cart-icon" />
        <span class="cart-text">{{gouwuche.length}}</span>
      </div>
    </div>
    <div class="listgouwu">
      <ul>
        <li v-for="(item,index) in gouwuche" :key="item.id">
          <input type="checkbox" @click="jisuanzong(item)" :checked="item.is">
          <img :src="item.img" alt="">
          <p>{{item.name}}</p>
          <p>{{item.price * item.count | formatPrice}}</p>
          <button @click="item.count++">+</button>
          <p v-text="item.count">1</p>
          <button @click="jian(index)">-</button>
          <button @click="del(index)">删除</button>
        </li>
      </ul>
      <input type="checkbox" @click="allchecks()" :checked="allcheck">全选
      <button @click="delall()">清理购物车</button>
      <h2>总计:{{zong | formatPrice}}</h2>
      <button @click="dan()">去结算</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "HomePage",
    data() {
      return {
        searchVal: "",
        bonusCards: [
          { price: 8, condition: "满38可用" },
          { price: 20, condition: "满99可用" },
        ],
        tabList: ['热门推荐', '新品推荐', '清凉一夏', '呵护肠胃'],
        currentTab: 0, // 默认选中第一个 tab
        shoplist: [{
          pid: 0,
          id: 0,
          name: '京都念慈菴 京都念慈菴蜜炼川贝枇杷膏150ml',
          img: require('@/assets/aa1.png'),
          price: 19.9,
        }, {
          pid: 0,
          id: 1,
          name: '华润三九 感冒灵颗粒10g*9袋',
          img: require('@/assets/aa2.png'),
          price: 29.9,
        }, {
          pid: 1,
          id: 2,
          name: '汤臣倍健 汤臣倍健白金蛋白粉礼盒装330G*2',
          img: require('@/assets/bb1.png'),
          price: 1999.9,
        }, {
          pid: 1,
          id: 3,
          name: '维诺健(ZY)维诺健蛋白粉450G(10G*45袋)',
          img: require('@/assets/bb2.png'),
          price: 199.9,
        }, {
          pid: 2,
          id: 4,
          name: '药圣堂(ZY)藿香正气水10ml*8支',
          img: require('@/assets/cc1.png'),
          price: 19.9,
        }, {
          pid: 2,
          id: 5,
          name: '药郑(ZY)藿香正气水10ml*8支',
          img: require('@/assets/cc2.png'),
          price: 99.9,
        }, {
          pid: 3,
          id: 6,
          name: '华润江中 健胃消食片0.8g*64片',
          img: require('@/assets/dd1.png'),
          price: 49.9,
        }, {
          pid: 3,
          id: 7,
          name: '扬子江 荜铃胃痛颗粒5q*6袋',
          img: require('@/assets/dd2.png'),
          price: 29.9,
        }], // 商品列表数据
        gouwuche: [], // 购物车数据
        allcheck: false
      };
    },
    methods: {
      handleScan() {
        // 扫码逻辑，可调用原生扫码或模拟弹窗等
        alert("扫码购功能，需结合原生或第三方库实现～");
      },
      handleGetBonus(card) {
        // 领取礼包逻辑，比如调接口、弹提示等
        alert(`领取 ¥${card.price} 礼包，条件：${card.condition}`);
      },
      handleTabClick(index) {
        this.currentTab = index;
      },
      handleMoreClick() {
        // 点击更多图标的逻辑，比如弹出下拉菜单等
        console.log('点击了更多图标');
      },
      addGouwu(item) {
        // 加入购物车逻辑，比如调接口、更新数据等
        this.gouwuche.push({
          id: this.gouwuche.length,
          name: item.name,
          img: item.img,
          price: item.price,
          count: 1,
          is: false,
        })
        console.log(this.gouwuche)
      },
      jian(index) {
        // 减少商品数量逻辑，比如调接口、更新数据等
        if (this.gouwuche[index].count > 1) {
          this.gouwuche[index].count--
        }

      },
      del: function (index) {
        this.gouwuche.splice(index, 1);
      },
      jisuanzong: function (item) {
        if (item.is) {
          item.is = false;
          this.allcheck = false;
        } else {
          item.is = true;
          this.allcheck = this.gouwuche.every(item => item.is == true)
        }
      },
      delall: function () {
        this.gouwuche = [];
      },
      allchecks: function () {
        this.allcheck = !this.allcheck;
        for (let i = 0; i < this.gouwuche.length; i++) {
          this.gouwuche[i].is = this.allcheck;
        }
      },
      dan: function () {
        this.$router.push({
          path:'/about',
        })
        localStorage.setItem('gouwuche', JSON.stringify(this.gouwuche))
      }
    },
    computed: {
      tabshoplist: function () {
        return this.shoplist.filter(item => item.pid === this.currentTab)
      },
      zong: function () {
        let zong = 0;
        for (let i = 0; i < this.gouwuche.length; i++) {
          if (this.gouwuche[i].is) {
            zong += this.gouwuche[i].price * this.gouwuche[i].count;
          }
        }
        return zong;
      }
    },
    filters: {
      formatPrice(value) {
        return "¥" + value.toFixed(2);
      }
    }
  };
</script>

<style scoped>
  .home-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    background-color: #fff;
    color: #333;
  }

  .top-bar {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(to right, #40afff, #87d2ff);
  }

  .logo img {
    height: 35px;
  }

  .search-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0 10px;
    background-color: #fff;
    border-radius: 20px;
    padding: 5px 10px;
  }

  .search-input {
    border: none;
    outline: none;
    flex: 1;
    height: 28px;
    font-size: 14px;
  }

  .scan-btn {
    color: #666;
    font-size: 14px;
    cursor: pointer;
  }

  .delivery-nav {
    display: flex;
    padding: 10px;
    background-color: #f8f8f8;
  }

  .delivery-info {
    display: flex;
    align-items: center;
    font-size: 16px;
  }

  .fast-text {
    color: #ff5722;
    margin-right: 5px;
  }

  .time-text {
    font-weight: bold;
  }

  .category-list {
    display: flex;
    flex: 1;
    justify-content: space-around;
    margin-left: 10px;
  }

  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
  }

  .category-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
  }

  .new-user-bonus {
    background: linear-gradient(to right, #ff7a5f, #ff5252);
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    margin: 10px;
  }

  .bonus-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .bonus-cards {
    display: flex;
    justify-content: space-around;
  }

  .bonus-card {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 8px;
    text-align: center;
  }

  .card-price {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .card-condition {
    font-size: 12px;
  }

  .get-btn {
    background-color: #fff;
    color: #ff5252;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    margin-top: 5px;
    cursor: pointer;
  }

  .new-product,
  .group-buy {
    margin: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
  }

  .product-title,
  .group-title {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .new-tag {
    background-color: #ff5252;
    color: #fff;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 5px;
  }

  .product-list,
  .group-list {
    display: flex;
    justify-content: space-around;
  }

  .product-item,
  .group-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .product-img,
  .group-img {
    width: 80px;
    height: 80px;
    margin-bottom: 5px;
    border-radius: 8px;
  }

  .product-price,
  .group-price {
    font-size: 14px;
  }

  .ad-box {
    margin: 10px;
    background-color: #ffe1b4;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .ad-img {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    margin-right: 10px;
  }

  .ad-text {
    display: flex;
    flex-direction: column;
  }

  .ad-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .ad-desc {
    font-size: 14px;
  }

  .tab-container {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
  }

  .tab-item {
    padding: 10px 15px;
    margin-right: 10px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
  }

  .tab-item.active {
    color: #ff9900;
    /* 选中的文字颜色，可自定义 */
    border-bottom: 2px solid #ff9900;
    /* 选中的下划线样式 */
  }

  .more-icon {
    margin-left: auto;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    color: #333;
  }

  .product-list {
    margin-top: 10px;
  }

  .product-item {
    margin-bottom: 10px;
    cursor: pointer;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  img {
    width: 100px;
    height: 100px;
  }

  p {
    margin: 0;
    padding: 0;
  }

  button {
    background-color: #f00;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
  }
</style>